<template>
  <view class="contanier">
    <!-- 页头 -->
    <page-head url="/pages/community/search-details/search-details"></page-head>
    <!-- 选项卡 -->
    <tabs-component :data="navList" :active="active" @change="handleNavChange"></tabs-component>
    <!-- 文章列表 -->
    <block v-for="(itemData,index) in navList" :key="index">
      <view class="article-list-container" v-show="active == index">
        <custom-scroll-view :loadData="handleLoadData" ref="listRef" @scroll='handleScroll' emptyText="暂无文章">
          <template v-slot="{data}">
            <view class="article-list-content">
              <view v-for="(item,idx) in data.data" :key="item.intactArticleId" class="article-list-item">
                <article-block :data="item">
                </article-block>
              </view>
            </view>
          </template>
        </custom-scroll-view>
      </view>
    </block>
    <!-- 悬浮按钮 -->
    <suspension-button :isBackUp='isBackUp' @backup="handleBackUp" @publish="handleJumpPublish"></suspension-button>
  </view>
</template>
<!-- refresher-background 下拉背景色 默认为白色 在h5有体现 在小程序则背景透明-->
<script>
  import {
    getLabelList,
    getArticleList
  } from "@/api/community/community.js";
  export default {
    data() {

      return {
        //当前选中项
        active: 0,
        // 社区选项卡列表
        navList: [],
        // 是否显示返回顶部按钮
        isBackUp: false,
        // 当前滚动位置
        scrollTop: 0,
        // 滚动位置的延迟记录
        oldScrollTop: 0,
        // 临时数据
        tempData: null
      };
    },
    onShow() {
      this.handleGetLabelList();
    },
    onLoad() {
      this.handleOn();
    },
    onUnload() {
      uni.$off('article-update');
    },
    methods: {
      // 监听滚动事件
      // isBackUp 当用户向下滑动后在向上滑动 显示返回顶部按钮
      handleScroll({
        scrollTop,
        oldScrollTop
      }) {
        // 上次滚动位置小于当前位置 代表正在向下滑动 反之正在向下滑动
        if (oldScrollTop <= scrollTop) {
          this.isBackUp = false;
        } else {
          this.isBackUp = true;
        }
        // 优化 当前滚动位置 小于10 返回顶部可不显示
        if (scrollTop < 10) {
          this.isBackUp = false;
        }
      },
      // 返回顶部
      handleBackUp() {
        let index = this.active;
        // 调用文章列表组件返回顶部方
        this.$refs.listRef[index].handleScrollToTop();
      },
      //导航栏点击切换
      handleNavChange(index, bool = false) {
        this.active = index;
        this.$nextTick(() => {
          this.$refs.listRef[index].handleRefresher(bool);
        })
      },
      // 加载数据
      async handleLoadData(page) {
        let familyId = this.navList[this.active].id;
        let {
          data: res
        } = await getArticleList(page, familyId);
        let data = {
          data: res.success ? res.data.list.records : [],
          pages: res.success ? res.data.list.pages : 0,
          success: res.success
        };
        // 接口成功情况下 存在临时需要追加首位的文章数据
        if (data.success && this.tempData) {
          let index = data.data.findIndex((item) => {
            return item.intactArticleId == this.tempData.intactArticleId;
          })
          if (index == -1) {
            data.data.unshift(this.tempData);
          } else if (index > 0) {
            data.data.splice(index, 1);
            data.data.unshift(this.tempData);
          }
        }
        this.tempData = null;
        return data;
      },
      // 跳转到发布文章页
      handleJumpPublish() {
        let familyId = this.navList[this.active].id;
        uni.navigateTo({
          url: "/pages/community/publish-article/publish-article?familyId=" + familyId
        })
      },
      // 获取话题列表
      async handleGetLabelList() {
        let {
          data: res
        } = await getLabelList();
        this.navList = res.data.labelList.map((item) => {
          return {
            text: item.familyName,
            id: item.familyId
          }
        })
        let data = [];
        this.handleNavChange(this.active); // 综合推荐数据
      },
      // 页面通讯
      handleOn() {
        // 名:页面通讯 监听 注意key保持一致 
        uni.$on('article-update', (data) => {
          let familyId = data.familyId;
          let index = this.navList.findIndex(item => item.id == familyId);
          if (index > -1) {
            // 名: 选项卡切换指定话题分类 ， 将文章数据追加到列表首位
            this.tempData = data.data;
            this.handleNavChange(index);
          }
        })
      }

    },
  };
</script>
<style lang="scss" scoped>
  .contanier {
    width: 100%;
    height: 100vh;
    overflow-y: hidden;

    // 文章列表区域
    .article-list-container {
      // 滚动区域的高度 为 屏幕总高度减去 状态栏高度 logo区域高度 搜索框 选项卡高度 加上选项卡向上偏移的距离
      height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 128rpx - 70rpx - 106rpx + 10rpx);
      // height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 200rpx - 106rpx);

      // height:calc( var(--window-bottom) - var(--status-bar-height) - 128rpx - 106rpx + 10rpx);
      .article-list-content {
        padding: 0rpx 32rpx;
        padding-bottom: 32px;

        .article-list-item {
          margin: auto;
          margin-bottom: 32rpx;
        }

      }
    }
  }
</style>
